export const quickPublic = {
  data() {
    return {
      text1:'<h3 >简介</h3>\n' +
          '<p>时空信息平台三维开发包 是一款用于创建虚拟场景的3D地理信息平台。目标是用于创建以基于Web的地图动态数据可视化。目前尽力提升平台的性能、准确率、虚拟化能力、易用性以及平台的各种支持。\n' +
          '</p>\n' +
          '<h3 >数据格式与功能特性</h3>\n' +
          '<p>系统支持3D Tiles、Terrain and Imagery Layers、3D\n' +
          '    Models（glTF）、Vectors and Geometry（Load KML, GeoJSON,\n' +
          '    TopoJSON, and CZML）、Time-Dynamic Visualization、3D, 2D, and\n' +
          '    2.5D Columbus View</p>\n' +
          '<ul>\n' +
          '    <li>支持2D,2.5D,3D\n' +
          '        形式的地理（地图）数据展示，\n' +
          '    </li>\n' +
          '    <li>可以绘制各种几何图形、高亮区域，支持导入图片，甚至三维模型等多种数据可视化展示\n' +
          '    </li>\n' +
          '    <li>可用于动态数据可视化并提供良好的触摸支持，支持绝大多数的浏览器和移动端浏览器。\n' +
          '    </li>\n' +
          '    <li>支持基于时间轴的动态流式数据展示\n' +
          '    </li>\n' +
          '    <li>是一个跨平台、跨浏览器的展示三维地球和地图的javascript 库。</li>\n' +
          '    <li>系统使用WebGL来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebGL。\n' +
          '    </li>\n' +
          '</ul>\n',
      text2:
          '<h3>引入JS</h3>\n' +
          '<pre><code class="lang-javascript">&lt;script src=<span class="hljs-string">"ThirdParty/Cesium/Cesium.js"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span>\n' +
          '</code></pre>\n' +
          '<p>开发者也可以根据自己的需求，通过ThirdParty/Cesium/source/来挑选自己的依赖库，裁剪js的大小，\n' +
          '</p>\n' +
          '<h3 id="html结构">HTML结构</h3>\n' +
          '<p>需要一个div作为 Viewer widget的容器</p>\n' +
          '<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"cesiumContainer"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>\n' +
          '</code></pre>\n' +
          '<p> 需要引入app.js来激活 Viewer，app.js最好在HTML末尾引入。\n' +
          '</p>\n' +
          '<pre><code class="lang-javascript">&lt;script src=<span class="hljs-string">"Source/App.js"</span>&gt;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></span>\n' +
          '</code></pre>\n' +
          '<h3 id="添加css样式">添加CSS样式\n' +
          '</h3>\n' +
          '<p>需要引入Cesium viewer中的各种widget的样式 新建一个index.css，并引入到index.html中\n' +
          '</p>\n' +
          '<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"index.css"</span> <span class="hljs-attr">media</span>=<span class="hljs-string">"screen"</span>&gt;</span>\n' +
          '</code></pre>\n' +
          '<p>在index.css中加入以下默认的Cesium CSS。</p>\n' +
          '<pre><code class="lang-html">@import url(ThirdParty/Cesium/Widgets/widgets.css);\n' +
          '</code></pre>\n' +
          '<h1 id="操作步骤">操作步骤</h1>\n' +
          '<ol>\n' +
          '    <li>打开Source/App.js，删除contents</li>\n' +
          '    <li>拷贝Source/AppSkeleton.js到Source/App.js</li>\n' +
          '    <li>确认server.js在Cesium文件夹根目录，并运行server.js\n' +
          '        (npm server.js)</li>\n' +
          '    <li>在新版本（支持WebGL）的浏览器中输入localhost:8080\n' +
          '    </li>\n' +
          '</ol>\n',
      text3:  '\n' +
          '<p>任何应用程序的基础都是<strong>Viewer</strong>。Viewer是一个带有多种功能的可交互的三位数字地球的容器（盒子）。创建一个Viewer和HTML中的一个id为"cesiumContainer"的div绑定即可。\n' +
          '</p>\n' +
          '<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> viewer = <span class="hljs-keyword">new</span> Cesium.Viewer(<span class="hljs-string">\'cesiumContainer\'</span>);\n' +
          '</code></pre>\n' +
          '<p>使用以上代码之后，能看到下图所示的基本的数字地球：\n' +
          '</p>\n' +
          '    <img src="~@/assets/developmc-center/introduce01.jpg" alt="">\n' +
          '<p>默认地，场景支持鼠标（电脑）和手指（移动设备）交互。控制相机漫游数字地球可以通过以下方式：\n' +
          '</p>\n' +
          '<ul>\n' +
          '    <li>按住鼠标左键拖拽 -\n' +
          '        让相机在数字地球平面平移。\n' +
          '    </li>\n' +
          '    <li>按住鼠标右键拖拽 -\n' +
          '        放缩相机。</li>\n' +
          '    <li>鼠标滚轮滑动 -\n' +
          '        放缩相机。</li>\n' +
          '    <li>按住鼠标中键拖拽 -\n' +
          '        在当前地球的屏幕中间点，旋转相机。\n' +
          '    </li>\n' +
          '</ul>\n' +
          '<p>默认的Viewer自带了一些有用的组件：\n' +
          '</p>\n' +
          '    <img src="../../../assets/developmc-center/introduce02.jpg" alt="">\n' +
          '<ol>\n' +
          '    <li>Geocoder :\n' +
          '        一种地理位置搜索工具，用于显示相机访问的地理位置。默认使用微软的Bing地图。\n' +
          '    </li>\n' +
          '    <li>HomeButton :\n' +
          '        首页位置，点击之后将视图跳转到默认视角。\n' +
          '    </li>\n' +
          '    <li>SceneModePicker : 切换2D、3D 和 Columbus View (CV)\n' +
          '        模式。</li>\n' +
          '    <li>BaseLayerPicker :\n' +
          '        选择三维数字地球的底图（imagery\n' +
          '        and terrain）。</li>\n' +
          '    <li>NavigationHelpButton :\n' +
          '        帮助提示，如何操作数字地球。\n' +
          '    </li>\n' +
          '    <li>Animation\n' +
          '        :控制视窗动画的播放速度。\n' +
          '    </li>\n' +
          '    <li>CreditsDisplay :\n' +
          '        展示商标版权和数据源。\n' +
          '    </li>\n' +
          '    <li>Timeline :\n' +
          '        展示当前时间和允许用户在进度条上拖动到任何一个指定的时间。\n' +
          '    </li>\n' +
          '    <li>FullscreenButton : 视察全屏按钮。\n' +
          '    </li>\n' +
          '</ol>\n' +
          '<p>我们可以通过代码来配置视窗组件，在我们初始化视窗的时候，通过配置参数添加/移除相关组件。\n' +
          '    以下代码是通过参数配置得到的viewer,该Viewer不带selection\n' +
          '    indicators, base layer picker or scene mode\n' +
          '    picker等组件。</p>\n' +
          '<pre><code class="lang-javascript"><span class="hljs-keyword">var</span> viewer = <span class="hljs-keyword">new</span> Cesium.Viewer(<span class="hljs-string">\'cesiumContainer\'</span>, {\n' +
          '    scene3DOnly: <span class="hljs-literal">true</span>,\n' +
          '    selectionIndicator: <span class="hljs-literal">false</span>,\n' +
          '    baseLayerPicker: <span class="hljs-literal">false</span>\n' +
          '});\n' +
          '</code></pre>\n' +
         '\n',
      text4:'\n' +
          '<p>应用程序一个关键元素是Imagery(图层)。瓦片图集合根据不同的投影方式映射到虚拟的三维数字地球表面。依赖于相机指向地表的方向和距离，Cesium会去请求和渲染不同层级的图层详细信息。\n' +
          '</p>\n' +
          '<p>多种图层能够被添加、移除、排序和适应到Cesium中。\n' +
          '</p>\n' +
          '<p><strong>支持的图层格式</strong></p>\n' +
          '<ol>\n' +
          '    <li>wms</li>\n' +
          '    <li>TMS</li>\n' +
          '    <li>WMTS (with time dynamic imagery)</li>\n' +
          '    <li>ArcGIS</li>\n' +
          '    <li>Bing Maps</li>\n' +
          '    <li>Google Earth</li>\n' +
          '    <li>Mapbox</li>\n' +
          '    <li>OpenStreetMap</li>\n' +
          '</ol>\n' +
          '<p><strong><em>注意：不同的数据源需要不同的认证\n' +
          '            -\n' +
          '            需要确保自己能够有权限访问到这些数据源，自然地需要注册特定的认证才可以</em></strong>\n' +
          '</p>\n' +
          '<p>默认地，Cesium使用Bing Maps作为默认的图层。这个图层被打包进Viewer中用于演示</p>\n' +
          '<ol>\n' +
          '    <li>\n' +
          '        <p>我们创建一个<strong>IonImageryProvider</strong>，将<strong><em>assetId</em></strong>传给对应的Sentinel-2图层。然后我们将<strong>ImageryProvider</strong>添加到<strong>viewer.imageryLayers</strong>。\n' +
          '        </p>\n' +
          '    </li>\n' +
          '</ol>\n' +
          '<pre><code class="lang-javascript"><span class="hljs-comment">// Remove default base layer</span>\n' +
          'viewer.imageryLayers.remove(viewer.imageryLayers.get(<span class="hljs-number">0</span>));\n' +
          '\n' +
          '<span class="hljs-comment">// Add Sentinel-2 imagery</span>\n' +
          'viewer.imageryLayers.addImageryProvider(<span class="hljs-keyword">new</span> Cesium.IonImageryProvider({ assetId : <span class="hljs-number">3954</span> }));\n' +
          '</code></pre>\n' +
          '<p>基于上述的代码，我们的Cesium应用程序在缩进zoom in的时候会看到如下图层：\n' +
          '</p>'+
      '    <img src="https://i.loli.net/2018/08/14/5b728084c2e52.jpg" alt="">',
      text5:'<p>系统支持流式的、可视化的全球高程投影地形地势、水形数据，包括海洋、湖泊、河流、山峰、峡谷和其他能够被三维展示出来的且效果比二维好的地形数据。像图层数据一样，Cesium引擎会从一个服务器上请求流式地形数据，仅请求那些基于当前相机能看到的需要绘制的图层上的数据。\n' +
          '</p>\n' +
          '<p><strong>支持的地形数据格式</strong>\n' +
          '</p>\n' +
          '<ul>\n' +
          '    <li>Quantized-mesh  Cesium开源的一种格式</li>\n' +
          '    <li>Heightmap</li>\n' +
          '    <li>Google Earth Enterprise</li>\n' +
          '</ul>\n' +
          '<p>为了添加地形数据，我们需要创建一个<strong>CesiumTerrainProvider</strong>，提供一个url和一些配置想，然后将这个provider赋值给<strong>viewer.terrainProvider</strong>。\n' +
          '</p>\n' +
          '<p>此处，我们使用Cesium WorldTerrian</p>\n' +
          '<pre><code class="lang-javascript"><span class="hljs-comment">// Load Cesium World Terrain</span>\n' +
          'viewer.terrainProvider = Cesium.createWorldTerrain({\n' +
          '    requestWaterMask : <span class="hljs-literal">true</span>, <span class="hljs-comment">// required for water effects</span>\n' +
          '    requestVertexNormals : <span class="hljs-literal">true</span> <span class="hljs-comment">// required for terrain lighting</span>\n' +
          '});\n' +
          '</code></pre>\n' +
          '<p><strong><em>requestWaterMask</em></strong>和<strong><em>requestVertexNormals</em></strong>是可选的配置项，告诉Cesium是否需要请求额外的水、光数据。这两个选项默认是设为false的。\n' +
          '</p>\n' +
          '<p>最终，既然我们有了地形数据，我们需要更多的线条来使得地形数据背后的objects能够正确地显示，只有最前面、最上面的objects才能是可见的。\n' +
          '</p>\n' +
          '<pre><code class="lang-javascript"><span class="hljs-comment">// Enable depth testing so things behind the terrain disappear.</span>\n' +
          'viewer.scene.globe.depthTestAgainstTerrain = <span class="hljs-literal">true</span>;\n' +
          '</code></pre>\n' +
          '<p>我们现在有地形数据和运动的水。可以在上面的地形数据上自由的探索。举一个显而易见的例子，你可以跳转到更加崎岖的区域</p>\n' +
          '<p><img src="https://i.loli.net/2018/08/14/5b728a65d7e08.jpg" alt=""></p>' ,
    }
  }
}